<template>
	<view class="container">

    <u-modal :show="show"  :title="title" :closeOnClickOverlay="true" @close="close" @confirm="confirm" @cancel="cancel" ref="uModal" :showCancelButton="true" :confirm-text="confirmText" :cancel-text="cancelText" :asyncClose="true" >
      <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>

		<view class="wrapper">
			<!-- 登录/注册按钮 -->
			<view class="login-header" v-if="!isLogin" @click="toLogin">
				<view class="login-avatar">
					<image class="avatar-img" :src="imguser + '/minis/default-avatar.png'" mode="aspectFill"></image>
				</view>
				<view class="login-text">
					<text>登录/注册</text>
					<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
				</view>
			</view>
			
			<!-- 用户信息卡片 -->
			<view class="user-card" v-if="isLogin">
				<view class="user-info">
					<image class="avatar" :src="user.avatar || imguser + '/minis/default-avatar.png'" mode="aspectFill"></image>
					<view class="user-detail">
						<view class="nickname">{{user.nickname || '未设置昵称'}}</view>
						<view class="user-id">ID：{{user.id || '---'}}</view>
					</view>
					<view class="edit-btn" @click="toConfirm(0)">
						<u-icon name="arrow-right" color="#666" size="14"></u-icon>
					</view>
				</view>
			</view>

			<!-- 功能菜单 -->
<!--			<view class="menu-section">-->
<!--				<view class="menu-title">我的服务</view>-->
<!--				<view class="menu-grid">-->
<!--					<view class="menu-item" @click="handleMenuClick('message')">-->
<!--						<view class="menu-icon">-->
<!--							<u-icon name="bell" size="28" color="#2979ff"></u-icon>-->
<!--							<view class="badge" v-if="number > 0">{{number}}</view>-->
<!--						</view>-->
<!--						<text class="menu-text">消息通知</text>-->
<!--					</view>-->
<!--					<view class="menu-item" @click="handleMenuClick('favorite')">-->
<!--						<view class="menu-icon">-->
<!--							<u-icon name="star" size="28" color="#ff9900"></u-icon>-->
<!--						</view>-->
<!--						<text class="menu-text">我的收藏</text>-->
<!--					</view>-->
<!--					<view class="menu-item" @click="handleMenuClick('history')">-->
<!--						<view class="menu-icon">-->
<!--							<u-icon name="clock" size="28" color="#19be6b"></u-icon>-->
<!--						</view>-->
<!--						<text class="menu-text">浏览历史</text>-->
<!--					</view>-->
<!--					<view class="menu-item" @click="handleMenuClick('help')">-->
<!--						<view class="menu-icon">-->
<!--							<u-icon name="question-circle" size="28" color="#f56c6c"></u-icon>-->
<!--						</view>-->
<!--						<text class="menu-text">帮助中心</text>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->

			<!-- 其他功能列表 -->
<!--			<view class="function-list">-->
<!--				<view class="function-item" @click="handleFunctionClick('settings')">-->
<!--					<view class="function-left">-->
<!--						<u-icon name="setting" size="20" color="#666"></u-icon>-->
<!--						<text class="function-text">系统设置</text>-->
<!--					</view>-->
<!--					<u-icon name="arrow-right" size="14" color="#999"></u-icon>-->
<!--				</view>-->
<!--				<view class="function-item" @click="handleFunctionClick('about')">-->
<!--					<view class="function-left">-->
<!--						<u-icon name="info-circle" size="20" color="#666"></u-icon>-->
<!--						<text class="function-text">关于我们</text>-->
<!--					</view>-->
<!--					<u-icon name="arrow-right" size="14" color="#999"></u-icon>-->
<!--				</view>-->
<!--			</view>-->
		</view>
		<tabbar :current="1" :tabBarList="tabBerLists"></tabbar>
	</view>
</template>

<script>
  import {messageNoReadNumber} from "../../api/index.js"
	import {modify,getUserInfo} from "../../api/setting.js"
	import tabbar from "../../components/tabbar/tabbar.vue"
	import config from '@/common/config'
  import tabBar from "@/utils/tabbar"
  import {getCheck} from '../../api/login.js'
  import UText from "../../uni_modules/uview-ui/components/u-text/u-text.vue";
export default {
	components: {
    UText,
		  tabbar
	},
	data() {
		return {
      number:'',
      show: false,
      title: '切换',
      confirmText:'',
      cancelText:'普通用户',
			tabBerLists:[],
      financeFlag: false,
			user:{},
      isLogin: false,
			imguser:config.baseImgUrl
		}
	},
	onShow() {
		this.checkLogin()
		if (this.isLogin) {
			this.getMessage()
			this.getLoadData()
			this.getMsgNumber()
		}
		this.tabBerLists = uni.getStorageSync('tabBarList') // 自定义的tabbar赋值
	},
  onLaunch(){
    this.checkLogin()
    if (this.isLogin) {
      this.getLoadData()
    }
  },
	methods: {
    checkLogin() {
      const token = uni.getStorageSync('token')
      this.isLogin = !!token
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/mobile'
      })
    },
    getLoadData() {
      getCheck().then(res => {
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          this.userType = userInfo.userType
        }
        this.financeFlag = res.data
      })
    },
		// 获取用户信息
		getMessage(){
      getUserInfo().then(res => {
        this.user = res.data
      })
		},
    getMsgNumber(){
      messageNoReadNumber().then(res => {
        this.number = res.data
      })
    },
		toConfirm(i){
			if(i==0){
				uni.navigateTo({
					url:"/pages/setting/setting"
				}) 
			}
		},
    // confirm() {
    //   uni.$u.toast('已切换为业务员')
    //   uni.setStorageSync('tabBarRole', 1)
    //   uni.setStorageSync('tabBarList', tabBar[this.userType])
    //   this.refreshLoad()
    //   // this.$forceUpdate();
    //   //绑定确认
    //   this.show = false
    // },
    // cancel(){
    //   uni.$u.toast('已切换为普通用户')
    //   uni.setStorageSync('tabBarRole', 0)
    //   if (this.financeFlag){
    //     uni.setStorageSync('tabBarList', tabBar[1])
    //   }else {
    //     uni.setStorageSync('tabBarRole', 0)
    //   }
    //   this.refreshLoad()
    //   this.show = false
    // },
    close(){
      this.show = false
    },
    refreshLoad(){
      uni.reLaunch({
        url:'/pages/index/index',
      })
    },
    handleMenuClick(type) {
      // 处理菜单点击事件
      console.log(`点击了 ${type} 菜单`)
    },
    handleFunctionClick(type) {
      // 处理功能点击事件
      console.log(`点击了 ${type} 功能`)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f6fa;
	padding-bottom: 120rpx;
}

.wrapper {
	padding: 24rpx;
}

/* 登录/注册样式 */
.login-header {
  background: linear-gradient(135deg, #2979ff 0%, #5e96ff 100%);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.2);
  display: flex;
  align-items: center;
}

.login-avatar {
  margin-right: 24rpx;
}

.avatar-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.login-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-text text {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 600;
}

.user-card {
	background: linear-gradient(135deg, #2979ff 0%, #5e96ff 100%);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(41, 121, 255, 0.2);

	.user-info {
		display: flex;
		align-items: center;
		position: relative;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
		}

		.user-detail {
			margin-left: 24rpx;
			flex: 1;

			.nickname {
				color: #ffffff;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 8rpx;
			}

			.user-id {
				color: rgba(255, 255, 255, 0.8);
				font-size: 24rpx;
			}
		}

		.edit-btn {
			width: 60rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.menu-section {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 24rpx;

	.menu-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.menu-icon {
				width: 80rpx;
				height: 80rpx;
				background: rgba(41, 121, 255, 0.1);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12rpx;
				position: relative;

				.badge {
					position: absolute;
					top: -6rpx;
					right: -6rpx;
					background: #f56c6c;
					color: #fff;
					font-size: 20rpx;
					padding: 2rpx 8rpx;
					border-radius: 16rpx;
					min-width: 32rpx;
					text-align: center;
				}
			}

			.menu-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}

.function-list {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 0 30rpx;

	.function-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f6fa;

		&:last-child {
			border-bottom: none;
		}

		.function-left {
			display: flex;
			align-items: center;

			.function-text {
				font-size: 28rpx;
				color: #333;
				margin-left: 16rpx;
			}
		}
	}
}
</style>
